import Taro, {Component} from "@tarojs/taro";
import {View, CoverView, Image, Text, RichText} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import {getRuntime} from '../../utils/common'

import './index.less'
import banner_03 from '../../assets/img/banner_03.jpg'
import icon_03_on from '../../assets/img/icon_03_0n.png'

// 工程金融中心-首页
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Success extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    info: {}
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'公益详情' })
    let id = this.$router.params.id
    this.getPublicWelfareInfo(parseInt(id))
  }

  getPublicWelfareInfo(id:number){
    let { PublicWelfareStore } = this.props.stores
    PublicWelfareStore.getPublicWelfareInfo({
      formId:id,
      callback: res => {
        this.setState({
          info: toJS(res)
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  render() {
    let { info } = this.state
    return (
      <View className='welfare-record-detail'>
        <Image src={banner_03} className='header-pic' />

        <CoverView>
          <View className='record-info'>
            <View className='r l'>
              <Image src={icon_03_on} className='icon-a' />
             {/* <Text className='title'>{partOf(info.introduce, 30)}</Text>*/}
              <View className='desc-name'>
                <Text className='desc'>救助人:</Text>
                <Text className='name'>{info.name}</Text>
              </View>
              <View className='desc-name' style={{paddingLeft: '20px'}}>
                <Text className='desc'>救助金额:</Text>
                <Text className='list-small'>￥</Text>
                <Text className='list-price'>{info.userAmountMoney}</Text>
              </View>
            </View>
          </View>
        </CoverView>

        <View className='article'>
          <View className='interval'/>

          <View className='column-title content-30'>
            <Text className='column-name'>捐助详情</Text>
          </View>

          <View className='welfare-article'>
            <RichText className='rich-text' nodes={info.description} />
          </View>

          <View className='interval'/>

          <View className='column-title content-30'>
            <Text className='column-name'>救助说明</Text>
          </View>

          <View className='welfare-article'>
            {info.introduce}
          </View>
        </View>

      </View>
    )
  }
}

export default Success
